import {
  Drawer,
  Form,
  Input,
  Tooltip,
  InputNumber,
  Radio,
  Select,
  Upload,
  Icon,
  Button,
  Row,
  Col,
} from 'antd';
import React, {useEffect, useState} from 'react';
import {FormComponentProps} from 'antd/es/form';
import apis from '@/services';
import {getAccessToken} from '@/utils/authority';
import {UploadProps} from 'antd/lib/upload';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import styles from '../../index.less';

interface Props extends FormComponentProps {
  data: any;
  close: Function;
  save: Function;
}

interface State {
  item: any;
  typeList: any[];
  emailEditor: any;
  fileList: any[];
  typeDataList: any[];
  recipient:any[]
  
}

const Save: React.FC<Props> = props => {
  const initState: State = {
    item: props.data,
    typeDataList: [],
    typeList: [],
    emailEditor: BraftEditor.createEditorState(
      (props.data.template && JSON.parse(props.data.template).text) || null,
    ),
    fileList: (props.data.template && JSON.parse(props.data.template).attachments) || [],
    recipient:[],
  };
  const {
    form: {getFieldDecorator, setFieldsValue },
    form,
  } = props;
  const [item, setItem] = useState(initState.item);
  const [typeList, setTypeList] = useState(initState.typeList);
  const [typeDataList, setTypeDataList] = useState(initState.typeDataList);
  const [emailEditor, setEmailEditor] = useState(initState.emailEditor);
  const [fileList, setFileList] = useState(initState.fileList);
  const [provider, setProvider] = useState<string>('');
  const [recipient, setRecipient] = useState(initState.recipient);
  const uploadProps: UploadProps = {
    action: '/AllLinks/file/static',
    headers: {
      'X-Access-Token': getAccessToken(),
    },
    defaultFileList: (props.data.template && JSON.parse(props.data.template).attachments) || [],
    // showUploadList: false,
    onChange(info) {
      if (info.file.status === 'done') {
        const tempFile: any = info.file;
        tempFile.localtion = info.file.response.result;
        fileList.push(tempFile);
        setFileList([...fileList]);
      }
    },
    onRemove(info) {
      const list = fileList.filter(e => e.uid !== info.uid);

      setFileList([...list]);
    },
  };

  useEffect(() => {
    if (item.id) {
      getConfig(item.provider);
      // setProvider(item.provider);
      apis.notifier.queryById(item.id).then(res => {
        if (res) {
          setItem(res.result);
        }
      });
    }
    apis.notifier.configType().then((res: any) => {
      if (res) {
        setTypeList(res.result);
      }
    });
    apis.notifier.getShouj(item.type).then((res: any) => {
      if (res) {
        setRecipient(res.result)
      }
    });
    
  }, []);

  const getConfig = (e: string) => {
    setProvider(e)
    if(item.type === 'sms'){
      apis.notifier.templateMetadata(item.type, e).then((res: any) => {
        if (res) {
          let arrList: any[] = [];
          res.result.properties.forEach((item,i) => {
              console.log(item)
              if(i != 2){
                arrList.push(item)
              }
          });
          setTypeDataList(arrList);
          }
      });
    }
  }
  const getsjrInfo = (e:string) =>{
    const template = item.template ? JSON.parse(item.template) : {};
    if(e.length > 0){
      if(template.sendTo == ''){
        template.sendTo.push(e)
      }else{
        template.sendTo.push(e)
        template.sendTo =  template.sendTo.join(",")
      }
    }else{
      template.sendTo =  template.sendTo
    }
    form.setFieldsValue({'template.sendTo':template.sendTo})
  }
  const getWXInfo = (e:string) =>{
    const template = item.template ? JSON.parse(item.template) : {};
    if(e.length > 0){
      if(template.toUser == ''){
        template.toUser = e
      }else{
        template.toUser.push(e)
        template.toUser =  template.toUser.join(",")
      }
    }else{
      template.toUser =  template.toUser
    }
    form.setFieldsValue({'template.toUser':template.toUser})
  } 
  const getSMSInfo = (e:string) =>{
    const template = item.template ? JSON.parse(item.template) : {};
    if(e.length > 0){
      if(template.phoneNumber == ''){
        template.phoneNumber = e
      }else{
        template.phoneNumber.push(e)
        template.phoneNumber =  template.phoneNumber.join(",")
      }
    }else{
      template.phoneNumber =  template.phoneNumber
    }
    props.form.setFieldsValue({'template.phoneNumber':template.phoneNumber})
  }
  const smsProvider = () => {
    const template = item.template ? JSON.parse(item.template) : {};
    return (
      <>
      {typeDataList.map((item: any, index: number) =>
      <Form.Item label={item.name}>
        {getFieldDecorator(`template[${item.property}]`, {
          rules: [{required: true, message: `请输入${item.name}`}],
          initialValue: template[`${item.property}`],
        })(<Input placeholder={item.description}/>)}
      </Form.Item> 
      )}
        <Form.Item label="收信人">
          {getFieldDecorator('template.phoneNumber', {
            initialValue: template.phoneNumber,
          })(<Input.TextArea rows={1} placeholder="多个收信人以  ,  分隔"/>)}
        </Form.Item>
        <Form.Item label="收信人号码">
         {getFieldDecorator('weix', {
         })(
           <Select  onChange={e => getSMSInfo(e)} mode="multiple">
             {recipient.map(i => (
               <Select.Option key={i.value} value={i.value}>
                 {i.label}
               </Select.Option>
             ))}
           </Select>,
         )}
        </Form.Item>
      </>
    );
   
    // switch (provider) {
    //   case 'test':
    //     return (
    //       <>
    //         <Form.Item label="短信内容">
    //           {getFieldDecorator('template.text', {
    //             initialValue: template.text,
    //           })(<Input.TextArea rows={3}/>)}
    //         </Form.Item>
    //         <Form.Item label="收件人">
    //           <Tooltip title="多个收件人以  ,  分隔">
    //             {getFieldDecorator('template.sendTo', {
    //               initialValue: template.sendTo,
    //             })(<Input.TextArea rows={3} placeholder="多个收件人以  ,  分隔"/>)}
    //           </Tooltip>
    //         </Form.Item>
    //       </>
    //     );
    //   case 'aliyunSms':
    //     return (
    //       <>
    //         <Row>
    //           <Col span={12}>
    //             <Form.Item label="模板编码" labelCol={{span: 4}} wrapperCol={{span: 20}}>
    //               {getFieldDecorator('template.code', {
    //                 rules: [{required: true, message: '请输入模板编码'}],
    //                 initialValue: template.code,
    //               })(<Input placeholder='阿里云短信模板编码'/>)}
    //             </Form.Item>
    //           </Col>
    //           <Col span={12}>
    //             <Form.Item label="签名" labelCol={{span: 4}} wrapperCol={{span: 20}}>
    //               {getFieldDecorator('template.signName', {
    //                 rules: [{required: true, message: '请输入签名信息'}],
    //                 initialValue: template.signName,
    //               })(<Input placeholder='阿里云短信模板签名'/>)}
    //             </Form.Item>
    //           </Col>
    //         </Row>
    //         <Form.Item label="收件人">
    //           <Tooltip title="暂只支持单个联系人">
    //             {getFieldDecorator('template.phoneNumber', {
    //               rules: [{required: true, message: '请输入收件人'}],
    //               initialValue: template.phoneNumber,
    //             })(<Input placeholder='短信接收者，暂只支持单个联系人'/>)}
    //           </Tooltip>
    //         </Form.Item>
    //       </>
    //     );
    //   default:
    //     return;
    // }
  };

  const renderConfig = () => {
    const {type} = item;
    const template = item.template ? JSON.parse(item.template) : {};
    const typeMap = new Map();
    typeMap.set('HTTP_CLIENT', 'POST http://[host]:[port]/api\nContent-Type: application/json\n\n${T(com.alibaba.fastjson.JSON).toJSONString(#this)}');
    typeMap.set('MQTT_CLIENT' , 'qos1 /device/${#deviceId}\n${T(com.alibaba.fastjson.JSON).toJSONString(#this)}');
    typeMap.set('UDP' , '[ip]:[port]');
    switch (type) {
      case 'sms':
        return (
          <>
            {smsProvider()}
          </>
        );
      case 'voice':
        return (
          <div>
            <Form.Item label="模版ID">
              {getFieldDecorator('template.ttsCode', {
                initialValue: template.ttsCode,
              })(<Input/>)}
            </Form.Item>
            <Form.Item label="被叫显号">
              {getFieldDecorator('template.calledShowNumbers', {
                initialValue: template.calledShowNumbers,
              })(<Input/>)}
            </Form.Item>
            <Form.Item label="被叫号码">
              {getFieldDecorator('template.CalledNumber', {
                initialValue: template.CalledNumber,
              })(<Input/>)}
            </Form.Item>
            <Form.Item label="播放次数">
              {getFieldDecorator('template.PlayTimes', {
                initialValue: template.PlayTimes,
              })(<InputNumber style={{width: '100%'}}/>)}
            </Form.Item>
          </div>
        );
      case 'email':
        return (
          <div>
            <Form.Item label="标题">
              {getFieldDecorator('template.subject', {
                initialValue: template.subject,
              })(<Input/>)}
            </Form.Item> 
            <Form.Item label="收件人邮箱">
              <Tooltip title="多个收件人以  ,  分隔">
                {getFieldDecorator('template.sendTo', {
                  initialValue: template.sendTo,
                })(<Input.TextArea rows={3} placeholder="多个收件人以  ,  分隔"/>)}
              </Tooltip>
            </Form.Item>
            <Form.Item label="收件人邮箱">
                {getFieldDecorator('sjrs', {
                })(
                  <Select  onChange={e => getsjrInfo(e)} mode="multiple">
                    {recipient.map(i => (
                      <Select.Option key={i.value} value={i.value}>
                        {i.label}
                      </Select.Option>
                    ))}
                  </Select>,
                )}
            </Form.Item>
            <Form.Item label="附件">
              <Upload {...uploadProps}>
                <Button>
                  <Icon type="upload"/> 上传附件
                </Button>
              </Upload>
            </Form.Item>
            <Form.Item label="正文">
              <BraftEditor
                className={styles.emailEditor}
                value={emailEditor}
                onChange={e => {
                  setEmailEditor(e);
                }}
              />
            </Form.Item>
          </div>
        );
      case 'weixin':
        return (
          <div>
            <Form.Item label="应用ID">
              {getFieldDecorator('template.agentId', {
                initialValue: template.agentId,
              })(<Input/>)}
            </Form.Item>
            <Form.Item label="收信人ID">
              {getFieldDecorator('template.toUser', {
                initialValue: template.toUser,
              })(<Input.TextArea rows={1} placeholder="多个收信人以  ,  分隔"/>)}
            </Form.Item>
            <Form.Item label="收信人微信">
                {getFieldDecorator('weix', {
                })(
                  <Select  onChange={e => getWXInfo(e)} mode="multiple">
                    {recipient.map(i => (
                      <Select.Option key={i.value} value={i.value}>
                        {i.label}
                      </Select.Option>
                    ))}
                  </Select>,
                )}
            </Form.Item>
            <Form.Item label="收信部门ID">
              {getFieldDecorator('template.toParty', {
                initialValue: template.toParty,
              })(<Input/>)}
            </Form.Item>
            <Form.Item label="按标签推送">
              {getFieldDecorator('template.toTag', {
                initialValue: template.toTag,
              })(<Input/>)}
            </Form.Item>
            <Form.Item label="内容">
              {getFieldDecorator('template.message', {
                initialValue: template.message,
              })(<Input.TextArea rows={3}/>)}
            </Form.Item>
          </div>
        );
      case 'dingTalk':
        return (
          <div>
            <Form.Item label="应用ID">
              {getFieldDecorator('template.agentId', {
                initialValue: template.agentId,
              })(<Input/>)}
            </Form.Item>
            <Form.Item label="收信人ID">
              {getFieldDecorator('template.userIdList', {
                initialValue: template.userIdList,
              })(<Input/>)}
            </Form.Item>
            <Form.Item label="收信部门ID">
              {getFieldDecorator('template.departmentIdList', {
                initialValue: template.departmentIdList,
              })(<Input/>)}
            </Form.Item>
            <Form.Item label="全部用户">
              {getFieldDecorator('template.toAllUser', {
                initialValue: template.toAllUser,
              })(
                <Radio.Group buttonStyle="solid">
                  <Radio.Button value="true">是</Radio.Button>
                  <Radio.Button value="false">否</Radio.Button>
                </Radio.Group>
              )}
            </Form.Item>
            <Form.Item label="内容">
              {getFieldDecorator('template.message', {
                initialValue: template.message,
              })(<Input.TextArea rows={3}/>)}
            </Form.Item>
          </div>
        );
      case 'network':
        return (
          <div>
            <Form.Item label="消息">
              {getFieldDecorator('template.text', {
                initialValue: template.text || typeMap.get(provider) || '',
              })(<Input.TextArea rows={6}/>)}
            </Form.Item>
          </div>
        );
      default:
        return null;
    }
  };
  const saveData = () => {
    form.validateFields((err, fileValue) => {
      if (err){
        return;
      }

      const id = props.data?.id;
      const data = form.getFieldsValue();
      const {template} = data;
      if (data.type === 'email') {
        if (typeof template.sendTo === 'string') {
          template.sendTo = template.sendTo.split(',');
        }
        if (emailEditor !== null) {
          template.text = emailEditor.toHTML();
        }
        template.attachments = fileList;
        // 附件列表
      }
      if(data.type === 'weixin'){
        if (typeof template.toUser === 'string') {
          template.toUser = template.toUser.split(',');
        }
      }
      if(data.type === 'sms'){
        if (typeof template.phoneNumber === 'string') {
          template.phoneNumber = template.phoneNumber.split(',');
        }
      }
      data.template = JSON.stringify(data.template);
      props.save({...data, id});
    })
  };

  return (
    <Drawer
      visible
      title={`${props.data?.name ? '编辑' : '新建'}通知模版`}
      onClose={() => props.close()}
      width={1000}
    >
      <Form labelCol={{span: 2}} wrapperCol={{span: 22}}>
        <Form.Item label="模版名称">
          {getFieldDecorator('name', {
            rules: [{required: true, message: '请输入模版名称'}],
            initialValue: item.name,
          })(<Input/>)}
        </Form.Item>
        <Row>
          <Col span={12}>
            <Form.Item label="通知类型" labelCol={{span: 4}} wrapperCol={{span: 20}}>
              {getFieldDecorator('type', {
                rules: [{required: true, message: '请输入通知类型'}],
                initialValue: item.type,
              })(
                <Select onChange={e => setItem({type: e})}>
                  {typeList.map(i => (
                    <Select.Option key={i.id} value={i.id}>
                      {i.name}
                    </Select.Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="服务商" labelCol={{span: 4}} wrapperCol={{span: 20}}>
              {getFieldDecorator('provider', {
                rules: [{required: true, message: '请选择服务商'}],
                initialValue: item.provider,
              })(
                <Select onChange={e => getConfig(e)}>
                {/* <Select onChange={e => setProvider(e)}> */}
                  {(typeList.find(i => i.id === item.type)?.providerInfos || []).map((e: any) => (
                    <Select.Option key={e.id} value={e.id}>
                      {e.name}
                    </Select.Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </Col>
        </Row>

        {renderConfig()}
      </Form>
      <div
        style={{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
        }}
      >
        <Button onClick={()=>props.close()} style={{ marginRight: 8 }}>
          取消
        </Button>
        <Button onClick={()=>saveData()} type="primary">
          确定
        </Button>
      </div>
    </Drawer>
  );
};

export default Form.create<Props>()(Save);
